<!DOCTYPE html>
<html>

<head>
    <title>SRS</title>
    <meta charset="utf-8">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
            /* 防止出现滚动条 */
        }

        .container {
            width: 100% !important;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        video {
            width: 1920px;
            height: 1080px;
            /* 使用视口高度单位确保全屏 */
            padding: 0;
            margin: 0;
            object-fit: cover !important;
            /* 确保视频填充整个容器 */
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
    <script type="text/javascript" src="js/adapter-7.4.0.min.js"></script>
    <script type="text/javascript" src="js/srs.sdk.js"></script>
    <script type="text/javascript" src="js/winlin.utility.js"></script>
    <script type="text/javascript" src="js/srs.page.js"></script>
</head>

<body>
<div class="container">
    <div id='url_container' class="form-inline">
        URL:
        <input type="text" id="txt_url" class="input-xxlarge" value="" display=none>
        <button class="btn btn-primary" id="btn_play">Play</button>
    </div>

    <!-- <p></p> -->
    <video id="rtc_media_player" controls autoplay></video>
</div>
<script type="text/javascript">
    $(function () {
      var sdk = null;
      var startPlay = function () {
        $("#rtc_media_player").show();
        if (sdk) {
          sdk.close();
        }
        sdk = new SrsRtcWhipWhepAsync();
        $("#rtc_media_player").prop("srcObject", sdk.stream);
        var url = $("#txt_url").val();
        //http://192.168.8.176:1985/rtc/v1/whep/?app=live&stream=livestream
        sdk
          .play(
            "http://192.168.8.111:1985/rtc/v1/whep/?app=live&stream=livestream",
            {
              videoOnly: true,
              audioOnly: false,
              autoplay : true,
              muted: true,
            }
          )
          .then(function (session) {
            $("#sessionid").html(session.sessionid);
            $("#simulator-drop").attr(
              "href",
              session.simulator + "?drop=1&username=" + session.sessionid
            );
          })
          .catch(function (reason) {
            sdk.close();
            console.error(reason);
          });
      };
        $('#url_container').hide()
        var query = parse_query_string();
        srs_init_whep("#txt_url", query);
        window.onload = function () {
            $("#rtc_media_player").prop("muted", true);
            startPlay();
        }
    });
</script>
</body>

</html>


